<template>
  <div class="my-message">
    <header :class="['header-con','header-w-bg']">
      <router-link to='/membercenter'>
        <a>
          <i class='back-icon'></i>
        </a>
      </router-link>
      <h1 class='header-tit'>我的消息</h1>
    </header>
    <ul class="my-tab">
      <li :class="[item.ispick ? 'cur' : '']" v-for="(item, index) in tabCtl" @click="tabChange" :data-index="index">
        <template v-if="item.messageCategory=='orderMessage'">
          <span :class="[noReadMsg.content.orderMessage != 0 ? 'hasInfo':'']">{{ item.name }}</span>
        </template>
        <template v-if="item.messageCategory=='sysMessage'">
          <span :class="[noReadMsg.content.sysMessage != 0 ? 'hasInfo':'']">{{ item.name }}</span>
        </template>
      </li>
    </ul>
    <div class="ordermessage" @scroll="scrollTab">
      <ul>
        <template v-if="messageCategory=='orderMessage'">
          <li v-for="item in myMessage.content.content" @click="changeHasRead" :data-id="item.id">
            <router-link to="">
              <div class="ordermessage-time">{{item.createDateStr}}</div>
              <div class="ordermessage-con">
                <i class="msg-tip" v-if="item.hasRead == 0">new</i>
                <i class="right-icon"></i>
                订单号：{{item.orderCode}}
                <p>{{item.content}}</p>
              </div>
            </router-link>
          </li>
        </template>
        <template v-if="messageCategory=='sysMessage'">
          <li v-for="item in myMessage.content.content" @click="changeHasRead" :data-id="item.id">
            <router-link to="">
              <div class="ordermessage-time">{{item.createDateStr}}</div>
              <div class="ordermessage-con">
                <i class="msg-tip" v-if="item.hasRead == 0">new</i>
                <i class="right-icon"></i>
                {{item.content}}
              </div>
            </router-link>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import weui from 'weui.js'
  import common from '../../assets/js/common'
  export default {
    data () {
      return {
        myMessage: {
          'resultCode': '',
          'resultMsg': '',
          'content': {
            'content': [],
            'sort': null,
            'totalElements': 0,
            'totalPages': 0,
            'lastPage': false,
            'numberOfElements': 0,
            'firstPage': true,
            'size': 0,
            'number': 0
          },
          'accessToken': null
        },
        messageCategory: 'orderMessage',
        noReadMsg: {
          'resultCode': '',
          'resultMsg': '',
          'content': {
            'allCount': 0,
            'teamMessage': 0,
            'orderMessage': 0,
            'sysMessage': 0
          },
          'accessToken': null
        },
        tabCtl: [
          {name: '订单消息', func: 'tabChange', ispick: true, ishasInfo: false, messageCategory: 'orderMessage'},
          {name: '系统消息', func: 'tabChange', ispick: false, ishasInfo: true, messageCategory: 'sysMessage'}
        ]
      }
    },
    created: function () {
      var self = this
      self.getMsgList()
      self.getNoReadMsg()
    },
    methods: {
      getMsgList: function () {
        var self = this
        var queryUrl = common.api.memberCenter.getMsgList
        var config = {
          headers: {
            'access-token': common.accesstoken,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        var data = qs.stringify({
          userId: 'ff8080815d86eb83015d9b7f06e9050c',
          pageNum: 0,
          pageSize: 10,
          messageCategory: self.messageCategory
        })
        var loading = weui.loading('加载中')
        axios.post(queryUrl, data, config).then(function (res) {
          if (res.data.resultMsg === 'success') {
            self.myMessage = res.data
            loading.hide()
          } else {
            self.myMessage.resultMsg = res.data.resultMsg
            loading.hide()
            weui.toast(self.myMessage.resultMsg)
          }
        })
      },
      getNoReadMsg: function () {
        // 未读消息数量
        var self = this
        var queryUrl = common.api.memberCenter.getNoReadMessageNum
        var config = {
          headers: {
            'access-token': common.accesstoken,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        var data = qs.stringify({
          userId: 'ff8080815d86eb83015d9b7f06e9050c'
        })
        var loading = weui.loading('加载中')
        axios.post(queryUrl, data, config).then(function (res) {
          if (res.data.resultMsg === 'success') {
            self.noReadMsg = res.data
            console.log(self.noReadMsg.content)
            loading.hide()
          } else {
            loading.hide()
            weui.toast('请求失败')
          }
        })
      },
      tabChange: function (tab) {
        var self = this
        var thisIndex = parseInt(tab.currentTarget.getAttribute('data-index'))
        self.tabCtl.forEach(function (e, i) {
          if (i === thisIndex) {
            e.ispick = true
          } else {
            e.ispick = false
          }
        })
        self.messageCategory = self.tabCtl[thisIndex].messageCategory
        self.getMsgList()
      },
      changeHasRead: function (e) {
        // 已读
        var orderId = e.currentTarget.getAttribute('data-id')
        var queryUrl = common.api.memberCenter.readMessageLogById
        var config = {
          headers: {
            'access-token': common.accesstoken,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        var data = qs.stringify({
          id: orderId
        })
        var loading = weui.loading('加载中')
        axios.post(queryUrl, data, config).then(function (res) {
          if (res.data.resultMsg === 'success') {
            loading.hide()
          } else {
            loading.hide()
            weui.toast('请求失败')
          }
        })
      },
      scrollTab: function () {
      }
    }
  }
</script>

<style lang="scss">
  @import '../../assets/sass/member/message';
</style>
